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1. INTRODUCTION 

Designing a good website with a great user interface has become noticeably significant as countless 
tasks are being done over the Internet nowadays. The user interface is the only bridge that connects a user to 
the particular web environment or an application and therefore, it is an interaction platform for users and 
machines [1]. A good design can optimize website success and improve several consumer dimensions, 
including information gathering, intention to return to the website, trust, and performance improvement. 
Whereas, a poorly designed website can lead to site failure [2]. The traditional design of the website user 
interface was designer orientated where only designers’ thought and viewpoints were considered in designing 
websites. But, researchers have proved that users’ opinions and viewpoints are remarkably important in 
designing websites in order to satisfy the users and to lead them to revisit the website [1]. The user interface 
has a vital role in satisfying users and establishing enhanced human computer interaction. 

A success of a website depends highly on user satisfaction and the possibility of meeting the users’ 
requirement efficiently where in turn depends on the nature of interaction between the user and the interface. 
Therefore, user interface design is particularly important in the development of websites. Emotion is a 
psychological approach that needs to be considered in website design in order to sustain the user with 
emotional attraction, a sense of aesthetic, or a positive impact on the website. Emotional appeals are 
contributed to the users through the visual design of a website where it can be delivered through images or 
colors [3]. Emotional reactions are prompted by a capability to captivate the user with affective and pleasant 
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web environment which can be elicited through visual design and interaction design. Previous researchers 
have argued that a website should be able to encourage emotional engagement and elicit positive impression 
in order to arouse revisit to the website. Poor interface design results in bad user interaction and experience 
which lead to high arousal and continuous anxiety of the users [4]. This results in user dissatisfaction emotion 
and leads to avoidance and prevents revisit to a poorly designed website [5]. 

A website that provides a good impression produces pleasant emotion, whereas, bad impression 
produces unpleasant emotion [6]. Therefore, a good website should induce the user to go through emotions 
such as enjoyment, pleasure, trust, interest, or contentment besides being useful and user-friendly as emotions 
are essential to the interpretation of experience. In order to develop a website that cultivates emotional 
engagement as well as elicits positive user experience, this study will perceive the understanding of how 
design elements control emotion so that we could implant the emotion into a website design. Higher learning 
website plays a significant role as a platform for higher educational institutions to provide information for 
prospective students, current students, faculties and alumni. It is a great challenge to present information on a 
higher learning institutions (HLIs) website in a way that can be easily explored by users’. 

Therefore, the research on the webpage design of HLI’s websites, exceptionally the appearance of 
the webpage is essential as only a few studies have been done on HLI’s website considering the emotional 
needs of the users. The primary intention of this research is to explore the needs and emotion of users while 
utilizing a HLIs website and to convert the feelings of the users into key design parameters for Kansei-based 
HLIs web design. So, this study employs Kansei Engineering technology to HLI’s websites in Malaysia in 
order to propose a standard HLIs web design that can satisfy the users’ emotions by invoking emotional 
involvement. The proposed standard web design can be helpful for designers to design HLI’s websites that 
can respond to the emotional needs of users’ appropriately. 


1.1. Emotions 

Emotions are reactions to accounted actions and are associated with an individual’s concerns, 
demands or goals as well as include physiological, affective, behavioral, and cognitive components [7]. An 
emotion is defined as “a mental state of readiness that arises from appraisals of events or of one’s thought” 
[8]. Emotion is considered as a highly sophisticated affective concept. According to the classification of [9] 
there are six basic emotions that are ordinary throughout human cultures which include fear, disgust, anger, 
surprise, happiness, and sadness. Subsequently, the researcher had included few more other basic emotions to 
the list such as embarrassment, excitement, contempt, shame, pride, satisfaction, and amusement on [10]. 

According to [11] emotions are induced affective states [12], or core affects accredited to stimuli 
[13]. Emotions are literally responses that emerge to stimulating events in an individual’s circumstance that 
are appraised to be related to users’ requirements, goals, and motivations. Once activated, emotions initiate 
subjective feelings such as fear or happiness, provokes automatic arousal, stimulate the body with 
spontaneous reactions that prepare it for adjusting to whatever situation one encounters, and convey the 
emotions with various intensity externally to others [14]. 

Researchers have discovered and specified a range of feeling associated with emotion. Different 
authors recognized different emotions. A study by [15] identified anger, guilt, sadness, and fear/anxiety. Joy, 
fear, anger, sadness, disgust, shame, and guilt are the feelings specified by [16]. Whereas, studies [17] and 
[18] simplified that emotion has both negative and positive valence. Researchers have argued that emotional 
responses have two components which are arousal and valence. Arousal indicates the response intensity, 
while the valence represents the affectivity varying from positive to negative [19],[20]. Therefore, an 
emotion is a complex, multidimensional psychological state that encompasses three various constituents 
which includes a subjective feeling, a physiological arousal, and a motor expression. Physiological arousal 
causes physical and psychological changes to emotional events such as alteration of heartbeat and breathing 
rates, body temperatures and others. Motor expression is behavioral responses which can be identified 
through someone’s facial and vocal expressions including their gesture and posture. Whereas, subjective 
feelings are emotions that an individual experience which they can describe it with universal emotion words 
when responding to an emotional event [21]. 

Studies [22],[23] have highlighted the necessity of emotions in human cognition and perception. 
Study of emotion in human computer interaction has only been initiated through recent researches to 
recognize its consequences [24]. Term “affective computing” [25] indicates the involvement of emotions in 
computer systems design as an effort to enhance the capability of computers to make decisions beside 
assisting humans more thoroughly [25]. Affective computing associates emotional intelligence in the 
machines: the ability to perceive and respond intelligently to emotion, the capability properly conveys 
emotions, and the ability to handle emotions of both the emotions of others and the emotions within oneself 
[22]. Picard has discussed the matters related to affecting computing: computing that relates to, arises and has 
proposed models for computer recognition of human emotions [25]. Finding [26] suggests emotional aspect 
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to be considered in designing interfaces for multimedia learning as positive emotions can boost learning 
experience of digital literate users. 

One of the challenges today in website design is to design a website that is not only usable but also 
appealing to users as emotional appeals are elicited to the users through the visual design of a website. Visual 
appeal influences early decision to reject or mistrust a poorly designed website which lacks of emotional 
approaches. Researchers recently have argued that usability is no longer the utmost target for designers. They 
have recognized that a website should also have an aesthetic value and must provide emotional engagement 
in order to optimize the user experience and therefore increase the user satisfaction with a particular website. 
Studies [27] and [28] have argued that the aspect of affect and emotion in the interrogation of information 
and interaction should be targeted more than functional outcome such as the efficacy and user friendly. 
According to [29] the study of usability literally includes evaluation in the aspects of utilitarian and hedonic 
dimensions due to the interconnection between decision making and usability. Research findings indicate that 
designs need not only should be centered on functionality and usability, but also satisfies the users during the 
interaction. Therefore, affective or emotional components should be involved in web design for better 
interaction as the users are emotional beings by nature. Emotion is one of the salient approaches in user 
experience as it prompts instinctive reactions to a product, website, circumstance or interface and as well as 
have an ability to draw user’s attention [29]. According to the same researcher, designing should minimize 
common emotions associated with poor usabilities such as frustration, annoyance, anger, and confusion. 

In addition, finding [30] pointed out that a well-systematized website with a masterly, “clean look 
and feel”, with spontaneous navigation and task-orientated functionality determines the emotional reactions 
that include the perception of credibility, trust, security, and perceived ease of use. Huisman and Van Hout 
have stated that whenever one encounters a website that has been designed with an unpleasant visual design 
which elicits the emotion of disgust will avoid the unpleasant interaction by hitting the back button of the 
browser [31]. This will eventually cause user dissatisfaction and avoidance of revisit to the particular 
website. Therefore, emotional approach needs to be included in website design to engage the user 
emotionally and attach them to the website for a longer time in order to gain user trust and satisfaction for the 
website. 


1.2. Kansei Engineering Technology 

Kansei Engineering was pioneered by Professor Mitsuo Nagamachi, the President of Hiroshima 
International University in 1970. Kansei engineering is a technique that specialized in converting the feelings 
and emotional effects into production elements. This approach has an ability to evaluate to evaluate different 
feelings and able to specify their correlation with the actual products. Whatever is felt about a particular 
product is precisely true for each specific person [6]. According to [6], it is a simple cognitive mans that can 
measure desired emotional reactions of a product or services. This tool was originated as a consumer-oriented 
technology for the evolution of a new product. It is a technology that converts a consumer’s feeling and 
image of a product into a design element [32]. According to [8], Kansei Engineering is a method that was 
invented to capture consumer perception, integrate them with the existing product design element in order to 
outline what Kansei is related to which element so that the new product design implants the consumer 
emotional needs. 

Reference [32] has categorized Kansei Engineering technology into three types: Type I is a category 
classification on the new product toward the design elements, Type II utilizes the current computer 
technologies such as Expert System, Neural Network Model and Genetic Algorithms and Type III is a model 
using a mathematical structure. [6] mentioned that Kansei measuring is a complicated method and it can be 
done through four suggested methods which can be assessed through the behavioral actions, words, body 
gestures and facial expressions as well as through physiological reactions which includes heart rate and brain 
waves. According to [6], some proponents would suggest physiological means which measure Kansei 
directly. On the other hand, some other would choose to use methods such as Kansei words and analysis 
method of motor expressions and some Kansei practitioners would choose both evaluation methods to find 
better solutions [6]. [33] mentioned that there are four main approach in measuring the emotion for Kansei 
engineering, which involves statistical scaling, magnitude estimation, Likert scale and semantic differential 
method. Kansei engineering is utilized in the automotive, electrical appliance, construction, clothing and 
other industries and acknowledged companies using this technology profited from good sales relevant to the 
new purchaser-orientated products. 


2. RESEARCH METHOD 
The HLI’s websites of both public and private universities in Malaysia are the specimen for this 
research. Content analysis has been conducted on a total of 63 (20 public and 43 private) universities in 
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Malaysia. This analysis has been done in order to select HLI’s websites with more different designs. Only a 
number of universities’ websites have been selected as subjects due to the large number of private and public 
universities in Malaysia. Content analysis has been done based on a common standards and methods of web 
design in previous studies, where 13 physical features were adapted from [1] for evaluation of the HLI’s 
websites which includes background color, header color, footer color, gallery, logo, main menu, multilingual 
feature, search bar, utilities bar, news section, other categories, link type, font sizes, and font color. The 
websites with different designs were chosen based on these 13 physical features. 


2.1. Specimen Selection 

Table 1 contains the data obtained through a content analysis process for selected HLI’s websites 
with more different designs. Table 1 is filled with 1 and 0 where 1 represents the existence of the particular 
physical feature on the university’s website and 0 represents the absence of the physical feature. 


Table 1. Physical Features of Selected HLI’s websites 





Page Header & Footer Malti- 
Background Cc Image Section Logo MainMenu language = Search Box 
olor 
§ Color Feature 
2 io @ be to Sat Ss Size Location praeg a, 3 2 z Location 
wn es e& Sei 8s 8 Bea S £625 sy Yes No 
e™’ O FBO a" SF OEE AASE 5 
= i smi1lTCBLR * g& L CR 
UM 100001000 0 00 0 11001 «0 «41 1 0 1 0 0 1 1 
USM 10000001 1000 011000 1 «21 «0 «+0 1 0 0 0 1 
UPM LOE O08 2 Oe Bot oO Ot OM ft 0 ff we 1 0 i 0 0 0 1 
UiTM 100010001 00001100812 01 «0 «0 1 0 1 0 0 
UUM itd 0 @ 0080 7 7 82.090 1 ff 08.0 2 0.0 0 1 1 0 0 0 1 
UTHM 100000 0 00 010101001 «0 «41 0 #0 1 0 0 0 1 
UMS 100011000 0 00 0 11001 «0 «41 Oo 0 1 0 0 0 1 
MEDIU 102-608 8 208 LOO. !8 8. is 2 O88 LE Ee 1 0 1 0 0 
LIMKOKWING 00 01 0000i10040 011 00 1 0 1 40 #0 1 0 0 0 1 
UCSI 010000100000 0 11 «00101 0 «0 1 0 0 0 1 
HELP 100000001000 011001 «031 «40 0 1 0 0 0 1 
SEGI 100010 0 01 0001 01001 «01 0 0 1 0 0 0 1 
Table 1. (Continue) Physical Features of Selected HLI’s websites 
5 vee Road oa Links Font Size Font Color 
5 Same 
5 : ? Colorful a @ ove & & : 
2 > = Location Location Color 9. > 388 RBs Pa ® 
a ie Text Image imge 11 3B BRS eSezes 
EL ¢.-R T-Cc B s mils mil 7 
UM 1 0 01 000i 1 0 11000 #0 1 1 0001 0 i101 
USM 1 0 0 2.00: 07 4 1 tat 1. 0 1 1 L-0°O 0 2.0 2-0. 2 
UPM 1 0 013100421 1 1 10 0 0 0 1 0 1 0001001 41 
UiTM 1 0 0 100i1ii1 1 je Ve | i 1 1 0 10010040 1 
UUM 1 0 010001 1 110010 1 1 1 100310001 
UTHM 1 0 010 001 1 110000 41 0 0 001110041 
UMS 1 0 01031041 1 100 0 0 0 1 0 1 1001000 1 
MEDIU 1 0 010011 1 1 10 0 0 0 1 0 1 10010001 
LIMKOK WING 1 0 1100041 0 100 0 0 0 1 0 1 0001 i100 41 
UCSI 1 0 1100041 1 01000 (0 1 1 0 000110041 
HELP 1 0 010i10ii1 1 1 10 0 0 0 1 0 10013100041 
SEGI 1 oO: .0. 2 £ of 8.9 1 Ld §. 8 Org 3 0 Lode FOP 2 Deed 


Through the content analysis, 12 university’s websites with different designs have been chosen 
which includes Universiti Malaya (UM), Universiti Sains Malaysia (USM), Universiti Putra Malaysia 
(UPM), Universiti Tekonologi Mara (UiTM), Universiti Utara Malaysia (UUM), Universiti Tun Hussein Onn 
Malaysia (UTHM), Universiti Malaysia Sabah (UMS), Al-Madinah International University (MEDIU), 
Limkokwing University of Creative Technology, UCSI University, HELP University and SEGI University 
(Table 1). These 12 higher learning institutions’ websites have been used in order to identify standard 
education website design using Kansei engineering technology. The selected websites are shown in Figure 1. 
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Figure 1. Selected Different Design Higher Learning Institutions’ Websites 


2.2. Experimental Setup 

An online survey (https://goo.gl/forms/WS 15W27cKDWegahOu1) was conducted in order to identify 
a standard Kansei-based user interface design for a university website. A questionnaire was distributed 
through online to respondents who were students currently pursuing their higher education in Malaysian 
universities. The questionnaire was designed in two sections; Section A: Demographic and Section B: Kansei 
Checklist. Section A was designed to collect demographic information, whereas Section B was designed to 
obtain the participants impression towards the 12 selected university websites. A total of 16 Kansei words 
related to university websites was adopted from [1] and were used in the Kansei checklist section. The 16 
Kansei words are convenient, simple, professional, unique, beautiful, efficient, appealing, perfect, creative, 
messy, waste-of-time, confusion, lovely, modern, disappointment, and up-to-date. Snapshots of the selected 
university websites were displayed along with the URL of the websites in the Section B and the 16 Kansei 
words were organized right below each of the websites in 5-point Likert’s scale as a Kansei checklist. The 
scale values were | to 5. The participants were requested to rate their impressions towards the 12 selected 
university websites according to scale. 


3. RESULTS AND ANALYSIS 

A total of 125 respondents was involved in this research on user’s emotion model for the standard 
user interface design of university website using Kansei engineering. The respondents involved were students 
in Malaysia who randomly answered the questionnaires. They were 74 female and 51 male. The majority of 
them with 95.2% were students who are currently pursuing bachelor degree in Malaysian universities. The 
majority of the participants were from University Teknologi Mara (UiTM) with 31.2%. 24.8%of them were 
from Universiti Tenaga Nasional (UNITEN), 16% from Universiti Putra Malaysia (UPM) and Universiti 
Malaysia Sabah (UMS), 8% from Universiti Utara Malaysia (UUM), 2.4% from Universiti Kebangsaan 
Malaysia (UKM) and 0.8% from Universiti Teknikal Malaysia Melaka (UTeM) and Universiti Malaysia 
Sarawak (UNIMAS). The majority of the respondents with 64% were agreed that they are skillful in using a 
university websites and visits university website two to three times a week with 36%. 39.5% of the 
respondents use the internet for the purpose of searching information. 

A standard Kansei-based user interface design was identified from the analysis of responses 
obtained from students on their impressions towards the 12 selected websites with the visible designs. The 
website of Limkokwing University obtained the highest score in the words convenient, simple, professional, 
unique, beautiful, efficient, appealing, perfect, creative, lovely, modern and up-to-date. Whereas, the website 
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of Universiti Teknologi Mara (UiTM) was chosen the most for the word convenient and Universiti Malaya 
(UM) was chosen the most for the Kansei word simple. A standard Kansei-based user interface web design 
for HLIs website has been identified based on the impressions of students towards the 12 different design 
university websites. The standard Kansei-based user interface design guideline has been proposed in Table 2 
below. 


Table 2. Standard Kansei-Based Guideline for Web User Interface Design 








Physical Features Value 
Page Background Color White JV 
Image fe 
Header & Footer Color Blue vr 
Gray A 
Black J 
Image Section Size Large J 
Location Top J 
Logo Location Left WA 
Main Menu Drop-down WA 
Vertical of 
Multi-language Feature Location Top Right JV 
Search Box Location Top Right JV 
Top Left A 
Utilities Bar Location Top Right Vf 
Top Left A 
News Section Location Center of 
Left f 
Other Section Location Center JV 
Bottom JV 
Links Text J 
Colorful Image Size Small J 
Medium JV 
Same Color Image Size Medium J 
Font Size 9-11 ae 
11-13 JV 
> 13 JV 
Font color White wf 
Orange J 
Gray of 
Black if 
Blue xf 





4. CONCLUSION 

This research aims to identify a standard HLI’s web design by exploring the needs and emotions of 
the users through Kansei engineering. Users’ emotion on the HLI’s website interface has been evaluated 
using Kansei engineering and the emotional features have been transformed and translated into product 
characteristics which can be used as a guideline for designing Kansei based HLI’s website that elicits 
emotional engagement. The 12 selected HLI’s websites with more different designs have been used in the 
Phase I of this research which involves Kansei engineering method to identify a standard Kansei-based HLIs 
web design. A standard Kansei-based HLI web design has been proposed (Table 2) in Phase I of this 
research. 

The research has been outlined to undergo three phases as a future research. The Phase I have 
identified and proposed a standard Kansei based HLI’s web design with the involvement of Kansei 
engineering technology. Universiti Malaysia Sabah website will be adapted in Phase IT based on the proposed 
standard Kansei based design as a future work. The adapted website will be evaluated in Phase III using the 
self-report method in order to justify the identified standard Kansei based HLI’s web design. Geneva 
Emotion Wheel (Figure 2) will be used in Phase HI to study the users’ emotion towards the adapted HLI’s 
website. The standard Kansei-based user interface web design which has been proposed in Phase I will be 
justified in Phase III in order to decide to be preferred in the process of designing a user interface for a 
university website. 
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